<template>
    <MainModule>
        <template #header>
            <MyRowForm :gutter="16">
                <MyColFormItem :span="6" :label="TableLabel.OrderId + ': '">
                    <el-input v-model.trim="table.selectParams.OrderId" :placeholder="'请输入' + TableLabel.OrderId"
                        clearable></el-input>
                </MyColFormItem>
                <MyColFormItem :span="6" :label="TableLabel.ShopCode + ': '">
                    <el-input v-model.trim="table.selectParams.ShopCode" :placeholder="'请输入' + TableLabel.ShopCode"
                        clearable></el-input>
                </MyColFormItem>
                <MyColFormItem :span="9" :label="TableLabel.Range + ': '">
                    <el-date-picker v-model="table.selectParams.Range" type="datetimerange" :unlink-panels="true"
                        value-format="YYYY-MM-DD HH:mm:ss" :shortcuts="shortcuts"></el-date-picker>
                </MyColFormItem>
                <MyColFormItem>
                    <template #col>
                        <el-button type="success" @click="Select">查询</el-button>
                        <el-button type="warning" @click="Reset">重置</el-button>
                    </template>
                </MyColFormItem>
            </MyRowForm>
        </template>

        <MyTable v-bind="MyTableConfig" :serial="(table.selectParams.Page - 1) * table.selectParams.PageSize + 1">
            <template #State="{ row }: { row: types.DataType }">
                {{ ParamsObj.OrderState?.[row.State] ?? `未知 - ${row.State}` }}
            </template>
            <template #OrderType="{ row }: { row: types.DataType }">
                {{ ParamsObj.OrderType?.[row.OrderType] ?? `未知 - ${row.OrderType}` }}
            </template>
        </MyTable>

        <template #footer>
            <MyPagination :total="table.total" v-model:page-size="table.selectParams.PageSize"
                v-model:current-page="table.selectParams.Page" @change="Select"></MyPagination>
        </template>
    </MainModule>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, reactive, shallowRef } from "vue";
import { MainModule, MyTable, MyPagination, MyRowForm, MyColFormItem } from "@/components"
import type { MyTableType } from "@/components"
import { OrderListApiUrl, OrderListApi } from "@/api/order_manager/order_list"
import { PaginationParams, shortcuts } from "@/library/common"
import { ParamsObjFormat } from "@/library/utils/tools"
import * as types from "./types"
import { TableLabel, columns } from "./ConfigData"
import { useMainLoading } from "@/hooks/useMainLoading"
import { AbortApi } from "@/library/utils/request"

const { openMainLoading, closeMainLoading } = useMainLoading()

const initForm: types.SelectParamsType = {
    ...PaginationParams
}
const table = reactive({
    selectParams: { ...initForm },
    total: 0,
})

const MyTableConfig = reactive<MyTableType>({
    loading: false,
    table: {
        data: []
    },
    columns
})

const Select = async () => {
    MyTableConfig.loading = true

    try {
        const { Data } = await OrderListApi.Select(table.selectParams)
        MyTableConfig.table.data = Data.Data
        table.total = Data.Count
    }
    catch (error) { }
    finally {
        MyTableConfig.loading = false
    }
}

const ParamsObj = shallowRef<types.ParamsObjType>({})
const Params = async () => {
    try {
        const { Data } = await OrderListApi.Params()
        ParamsObj.value = ParamsObjFormat(Data)
    }
    catch (error) { }
}

const Reset = () => {
    table.selectParams = { ...initForm }
}

onMounted(async () => {
    openMainLoading()
    await Select()
    await Params()
    closeMainLoading()
})

onUnmounted(() => {
    AbortApi([OrderListApiUrl.Select, OrderListApiUrl.Params])
})

</script>

<style scoped></style>